<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;">
    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>
    <a-spin :spinning="confirmLoading">

      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item label="身份职业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="category">
          <j-checkbox
            v-model="model.category"
            :options="jCheckboxOptions"
          />
        </a-form-model-item>

        <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cname">
          <a-input placeholder="请输入艺术家姓名" v-model="model.cname"/>
        </a-form-model-item>
        <a-form-model-item label="外文名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fname">
          <a-input placeholder="请输入内容" v-model="model.fname" />
        </a-form-model-item>
        <a-form-model-item label="是否入驻歌手" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isEnter">
          <a-radio-group  v-model="model.isEnter" >
            <a-radio :value="1">是</a-radio>
            <a-radio :value="2">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="国籍" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nationality">
          <a-input placeholder="请输入内容" v-model="model.nationality" />
        </a-form-model-item>
        <a-form-model-item label="出生地" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birthplace">
          <a-input placeholder="请输入内容" v-model="model.birthplace" />
        </a-form-model-item>
        <a-form-model-item label="头像" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.avatar" ></j-image-upload>
        </a-form-model-item>
        <a-form-model-item label="出生/成立日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            placeholder="请选择生日"
            v-model="model.birthday"
            :format="dateFormat"
            :getCalendarContainer="node => node.parentNode"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="styles"
          label="选择风格">
          <j-multi-select-tag
            v-model="model.styles"
            dictCode="music_singer_style"
            placeholder="请选择">
          </j-multi-select-tag>
        </a-form-model-item>

        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="singerType"
          required
          label="性别"
        >
          <j-dict-select-tag
            placeholder="性别"
            dictCode="music_singer_gender"
            v-model="model.singerType"
          />
        </a-form-model-item>
        <a-form-model-item
          label="热点标志"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="alias"
        >
          <a-input placeholder="热度说明" v-model="model.alias" ></a-input>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="singerRegion"
          required
          label="选择地区"
        >
          <j-dict-select-tag
            placeholder="请选择地区"
            dictCode="music_singer_region"
            v-model="model.singerRegion"
          />
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="basicInfo"
          label="基本信息">
          <a-textarea :rows="4" v-model="model.basicInfo" placeholder="请输入描述"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="mainWorks"
          label="代表作品">
          <a-textarea :rows="2" v-model="model.mainWorks" placeholder="请输入作品"/>
        </a-form-model-item>
        <a-form-model-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="mainAchievements"
          label="主要成就">
          <a-textarea :rows="4" v-model="model.mainAchievements" placeholder="请输入成就"/>
        </a-form-model-item>
        <a-form-model-item label="检索首字母" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initial">
          <a-input placeholder="请输入内容" v-model="model.initial" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button type="primary" :loading="confirmLoading" @click="handleSubmit">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import moment from 'moment'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import { addArtist,editArtist } from '@/api/api'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import JCheckbox from '@/components/jeecg/JCheckbox'
  import JSelectMultiple from '@/components/jeecg/JSelectMultiple'
  export default {
    name: 'ArtistModal',
    components: { JDictSelectTag,JSelectMultiple,JCheckbox },
    data () {
      return {
        departDisabled: false, //是否是我的部门调用该页面
        roleDisabled: false, //是否是角色维护调用该页面
        modalWidth:800,
        drawerWidth:700,
        modaltoggleFlag:true,
        confirmDirty: false,
        userId:"", //保存用户id
        disableSubmit:false,
        model: { },
        dateFormat:"YYYY-MM-DD",
        jCheckboxOptions: [
          {label: '演唱者', value: 'MU001'},
          {label: '作词人', value: 'MU002'},
          {label: '作曲人', value: 'MU003'}
        ],
        validatorRules:{
          category:[{ required: true, message: '请选择身份' }],
          isEnter:[{ required: true, message: '请选择' }],
          cname:[{required: true, message: '请输入艺术家姓名!'},
            {validator: this.validateUsername,}],
          singerType: [{ required: true, message: '请输入分类' }] ,
          initial: [
            {
              validator: (rule, value, callback) => {
                if (value === "") {
                  callback(new Error("首字母必须填写"));
                } else if (!/^[a-zA-Z]$/.test(value)) {
                  callback(new Error("首字母必须a-z或者A-Z之间"));
                } else {
                  callback();
                }
              },
              trigger: "blur"
            }
          ],

        },
        departIdShow:false,
        title:"操作",
        visible: false,

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        uploadLoading:false,
        confirmLoading: false,
        headers:{},
        url: {
          fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",
          artistId:"/mus/util/generateId", // 引入生成添加用户情况下的url
          queryTenantList: '/sys/tenant/queryList'
        },
        tenantsOptions: [],
        rolesOptions:[],
        nextDepartOptions:[],
      }
    },
    methods: {
      add () {
        this.refresh();
        this.edit({activitiSync:'1',artistIdentity:1});
      },
      edit (record) {
        let that = this;
        that.visible = true;
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize();
        that.artistId = record.id;
        that.model = Object.assign({},{selectedroles:'',selecteddeparts:''}, record);
        console.log('that.model=',that.model)
      },
      moment,
      handleCancel () {
        this.close()
      },
      //窗口最大化切换
      toggleScreen(){
        if(this.modaltoggleFlag){
          this.modalWidth = window.innerWidth;
        }else{
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        if(screenWidth < 500){
          this.drawerWidth = screenWidth;
        }else{
          this.drawerWidth = 700;
        }
      },
      refresh () {
        this.artistId=""
        this.nextDepartOptions=[];
        this.departIdShow=false;
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.nextDepartOptions=[];
        this.departIdShow=false;
        this.$refs.form.resetFields();
      },
      handleSubmit () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let obj;
            if(!this.model.id){
              this.model.id = this.artistId;
              obj=addArtist(this.model);
            }else{
              obj=editArtist(this.model);
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
            return false;
          }
        })
      },
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

  /*【JTC-502】 添加用户两个滚动条*/
  /deep/ .ant-drawer-body {
    padding-bottom: 53px;
  }

</style>